<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/shop/list' }">
        <i class="el-icon-present"></i> 
        商品管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="list">
        <!-- 树形结构 -->
        <div id="left">
          <p>产品类型列表</p>
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" accordion></el-tree>
        </div>
        <!-- 表格 -->
        <div id="right">
           <div style="width:100%;height:80px;">
            <el-button type="warning"  icon="el-icon-plus" style="width:150px;height:40px;" @click="jia" >添加子类型</el-button>
            <el-button type="danger"  icon="el-icon-delete" style="width:150px;height:40px;margin-left: 10px;">删除该类型</el-button>
          </div>
          <el-form ref="form" :model="form" label-width="120px" :rules="rules" v-if="xian">
            <el-form-item label="分类名称:" prop="name">
              <el-input v-model="form.name"  :placeholder="form.name"></el-input>
            </el-form-item>
            <el-form-item label="排序：">
              <el-input v-model="form.px"  :placeholder="form.name"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input  v-model="form.bz"  type="textarea"  ></el-input>
            </el-form-item>
            <el-form-item style="width:100%;display:flex;">
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
            <el-form ref="form" :model="form" label-width="130px" :rules="rules" v-else>
            <el-form-item label="子类型分类名称:" prop="name">
              <el-input v-model="form.name"  :placeholder="form.name"></el-input>
            </el-form-item>
            <el-form-item label="排序：">
              <el-input v-model="form.px"  :placeholder="form.name"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input  v-model="form.bz"  type="textarea"  ></el-input>
            </el-form-item>
            <el-form-item style="width:100%;display:flex;">
              <el-button type="primary" @click="onSubmit">提交子类型</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
  </div>
</template>
<script>
export default{
  data(){
    return {
        xian:true,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
       data: [{
        label: '商品分类列表',
        children: 
        [
          {label: '心脑血管',
          children: [{label: '冠心病'},{label: '脑血管疾病'}]},
          {label: '日常用药',
          children: [{label: '感冒药'},{label: '咳嗽药'},{label: '肠胃消化'},]},
          {label: '神经系统',
          children: [{label: '帕金森'},{label: '失眠'}]}
        ]
      }],
       form: {
        name: '',
        px:'',
        bz: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  methods:{
    jia(){
      this.xian = false
    },
    shan(){

    },
     handleNodeClick(data) {
      
    },
    onSubmit(){

    }
  },
  created(){
    
  }
}
</script>
<style scoped>

#list{
  width: 80%;
  height: 100%;
  display: flex;
  margin: 50px 0 0 50px;

}
#left{
  width: 20%;
  height: 657px;
  border: 1px solid #dcd9d9;
  margin: 1px;
}
#left p {
  width: 100%;
  height: 40px;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
  background-color: #61A7CF;
  padding-left:2px ;
  box-sizing: border-box;
}
#right{
  width: calc(100% - 10%);
  height: 657px;
  margin: 1px;
  padding: 50px;
  flex-direction: column;
  display: flex;

}
</style>